<template>
  <scroll-view
    class="product-scroll"
    scroll-y="true"
    @scrolltolower="toLoadMore"
  >
    <view class="product-list">
      <view
        class="product-item"
        v-for="(item, index) in goodsList"
        @click.stop="handleItem(item.id)"
        :key="index"
      >
        <view class="goods-box" :style="[goodsFillSpace]">
          <view class="goods-fill-box" :style="[goodsBoxStyle]">
            <view class="product-pic">
              <image lazy-load :src="item.cover_pic" mode="aspectFill" />
              <goodsSaleNo
                v-if="item.product_type != 7"
                :imgHeight="'31.738vw'"
                :goodsInfo="item"
                :imgMode="'heightFix'"
              ></goodsSaleNo>
			  <view class="product-take_price" v-if="item.take_price > 0">可使用联盟券: ¥{{ item.take_price }}</view>
			  <view class="product-take_price" style="bottom: 90rpx" v-if="item.send_price > 0">可获得联盟券: ¥{{ item.send_price }}</view>
            </view>
            <view class="goods-info">
              <view
                class="goods-title"
                :style="{ color: propsData.params.producNameColor }"
                >{{ item.name }}</view
              >
              <view class="info-down">
                <view class="price-box">
                  <view
                    class="price"
                    :style="{ color: propsData.params.priceColor }"
                  >
                    <view>￥</view>
                    <view>{{ item.price | priceBeforeZero }}</view>
                    <view>{{ item.price | priceAfterZero }}</view>
                  </view>
                  <view
                    class="origin-price"
                    v-if="showPrice"
                    :style="{ color: propsData.params.originPriceColor }"
                    >￥{{ item.original_price || item.price }}</view
                  >
                </view>
                <view
                  class="goods-sales"
                  :style="{ color: propsData.params.saleColor }"
                  v-if="showSales"
                  >{{ $t("list.sold") + " " + item.virtual_sales }}</view
                >
                <!-- ||( item.product_type == 4) -->
                <view
                  class="buy-btn"
                  v-if="showBuyBtn && item.product_type == 0"
                >
                  <buyBtn @handleBuy="buyBtn(item)" :propsData="propsData">
                  </buyBtn>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { diyMixin } from "../../mixins/diy";
import buyBtn from "../components/buyBtn.vue";
import goodsSaleNo from "@/components/goodsSaleNo/index.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    goodsList: {
      type: Array,
      default: [],
    },
    goodsItemSpace: {
      type: Object,
      default: {},
    },
  },
  mixins: [diyMixin], //混入文件
  components: {
    buyBtn,
    goodsSaleNo,
  },

  computed: {
    showBuyBtn() {
      return this.propsData.params.showBuyBtn;
    },
    showPrice() {
      return this.propsData.params.showPrice;
    },
    showSales() {
      return this.propsData.params.showSales;
    },
    goodsFillSpace() {
      let out = this.propsData.params.goodsItemOutSpace || "0";
      let css = {};
      if (out) {
        css["margin"] = `0 ${out}rpx ${out * 2}rpx`;
      }
      return css;
    },
    goodsBoxStyle() {
      let inner = this.propsData.params.goodsItemInnerSpace || "0";
      let css = {};
      if (inner) {
        css["padding"] = `${inner * 2}rpx`;
      }
      return css;
    },
  },

  methods: {
    buyBtn(item) {
      this.$emit("clickBuyBtn", { item });
    },
    handleItem(id) {
      this.$emit("toGoodDetail", { id });
    },
    toLoadMore() {
      this.$emit("scrollToEnd");
    },
  },
};
</script>

<style scoped lang="scss">
.product-scroll {
  width: 100%;
  overflow: hidden;

  .product-list {
    width: 100%;
    padding: 0 3.2%;
  }
  .product-item {
    width: 50%;
    float: left;

    .goods-box {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }

    .goods-fill-box {
      background: #ffffff;
      position: relative;
      border-radius: 1.34vw;
    }
    .product-pic {
      width: 100%;
      height: 45.34vw;
      border-radius: 1.34vw 1.34vw 0 0;
      overflow: hidden;
      position: relative;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
	  .product-take_price {
	  	position: absolute;
	  	display: inline-block;
	  	background-color: rgba(0, 0, 0, 0.5);
	  	border-radius: 0 20rpx 20rpx 0;
	  	padding: 3rpx 10rpx;
	  	color: #fff;
	  	font-size: 24rpx;
	  	bottom: 40rpx;
	  }
    }
    .goods-info {
      width: 100%;
      min-height: 220rpx;
      max-height: 28vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
      background-color: #ffffff;
      border-radius: 0 0 1.34vw 1.34vw;
      overflow: hidden;
      padding-top: 1.067vw;
      .goods-title {
        width: 91.73%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 28rpx;
        line-height: 40rpx;
        height: 80rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: rgba(29, 29, 29, 0.94);
        word-break: break-all;
      }
      .info-down {
        width: 91.73%;
        position: relative;
        margin: 2.134vw 0;
        // margin-bottom: 3.2vw;
        .price-box {
          display: flex;
          align-items: flex-end;
          .price {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 600;
            line-height: 1;
            color: #fa2c1b;
            display: flex;
            align-items: flex-end;
            view:nth-child(2) {
              font-size: 38rpx;
            }
          }
          .origin-price {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #9b9b9b;
            display: inline-block;
            text-decoration: line-through;
            margin-left: 1.67vw;
          }
        }
        .goods-sales {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #9b9b9b;
          margin-top: 2.134vw;
        }
        .buy-btn {
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
  .product-item:last-child {
    margin-bottom: 0;
  }
  .product-item:nth-child(even) {
    margin-right: 0 !important;
    .goods-box {
      margin-right: 0 !important;
    }
  }

  .product-item:nth-child(odd) {
    .goods-box {
      margin-left: 0 !important;
    }
  }
}
.product-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>
